<template>
  <div class="login-box">
    <div class="demo-ruleForm">
      <h5 class="logo" v-text="title" />
      <el-form :model="ruleForm">
        <el-input
          v-model="name"
          class="d-input"
          prefix-icon="el-icon-user"
          placeholder="请输入用户名"
        />
        <el-input
          v-model="password"
          class="d-input"
          type="password"
          prefix-icon="el-icon-lock"
          placeholder="请输入密码"
        />
        <el-button
          type="success"
          style="width: 100%;"
          @click="submitForm()"
        >登录</el-button>
      </el-form>

    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { uuid2 } from '/@/utils/auth'
import { useStore } from 'vuex'

export default {
  setup() {
    const router = useRouter()
    const store = useStore()
    const ruleForm = reactive({
      name: '',
      password: '',
      title: import.meta.env.VITE_APP_SYSTEM_NAME,
      token: uuid2()
    })

    const submitForm = () => {
      if (!ruleForm.name) {
        console.error('请输入用户名')
        return
      }
      if (!ruleForm.password) {
        console.error('请输入密码')
        return
      }
      store.dispatch('setUserInfo', { name: ruleForm.name })
      store.dispatch('setToken', ruleForm.token)
      router.push({ name: 'Dashboard' })
    }

    return {
      ...toRefs(ruleForm),
      submitForm
    }
  }
}
</script>

<style lang="scss" scoped>
.login-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  background-color: #2d3a4b;
  overflow: hidden;
  .logo {
    color: #fff;
    text-align: center;
    font-size: 36px;
  }
  .demo-ruleForm {
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    .d-input {
      margin-bottom: 20px;
    }
  }
}
</style>
